<template>
  <view class="tm-segTabs d-inline-block relative ">
    <view class="tm-segTabs-wkbody  fulled flex-start  relative" :class="['pa-'+gutter]"
          :style="{width:width>0?width+'rpx':'auto'}">
      <view @click="clickItem(index, item)" :class="[
					`px-${margin[0]} py-${margin[1]}`,
					`text-size-${fontSize}`,
					`round-${round}`,
					active_index == index
						? 'text-weight-b ' + (black_tmeme ? `text-grey-lighten-3 ` : `text-${color_tmeme}`)
						: black_tmeme
						? `text-grey bk`
						: `text-${color}`
				]" :id="'tm-segTabs-item-' + index" v-for="(item, index) in listData" :key="index"
            class="tm-segTabs-item flex-shrink flex-center" :style="{
					width:width_item+'px'
				}">
        <slot name="default"
              :item="{color:color_tmeme, data: item, index: index, isActive: active_index == index }">
          {{ returnKeyValue(item) }}
        </slot>
      </view>
    </view>
    <view :class="[black_tmeme ? 'grey-darken-5' : bgColor, `round-${round}`]"
          class="tm-segTabs-bg absolute  l-0 t-0 fulled  " :style="{ height: body_height + 'px' }">
      <view
          :class="[`shadow-${activeColor}-${shadow}`,black_tmeme ? 'grey-darken-3' : activeColor, `round-${round}`,aniOn?'aniOn':'',`mt-${gutter} ml-${gutter/2}`]"
          class="tm-segTabs-bg-bar   relative"
          :style="{ width: `${active_barWidth}px`, height: `${active_barHeight}px`,transform: `translateX(${left}px)` }">
      </view>
    </view>
  </view>
</template>

<script>
/**
 * 分段器选项卡
 * @property {Number} value = [] 默认0,当前激活的选项.
 * @property {Array} list = [] 默认数据,对象数组或者字符串数组
 * @property {String} rang-key = [] 默认text,list对象数组时取文本的字段名称
 * @property {String} color = [] 默认black,默认的文字颜色
 * @property {String} bg-color = [] 默认grey-lighten-4,默认的背景色
 * @property {String} active-font-color = [] 默认black,激活的文本色
 * @property {String} active-color = [] 默认black,激活项的背景色
 * @property {String} font-size = [] 默认 n,字号，xxs,xs,s,n,g,lg,xl
 * @property {Array} margin = [] 默认 [24,10],左右和上下的间距，调整它可以控制宽度和高度。
 * @property {Number} round = [] 默认4， 圆角
 * @property {Number} shadow = [] 默认4， 投影
 * @property {Number} gutter = [] 默认4， 四边的间隙
 * @property {Number} width = [] 默认0， 整体的宽度，默认不自动宽度，提供了后，项目内的宽度为均分此宽度。
 * @property {Boolean} black = [] 默认false， 是否暗黑模式
 * @property {Boolean} fllow-theme = [] 默认true， 是否跟随主题切换主色。
 */
export default {
  name: 'tm-segTabs',
  props: {
    value: {
      type: Number,
      defalut: 0
    },
    list: {
      type: Array,
      default: () => []
    },
    //整体的宽度，不设置使用默认计算的宽度。
    width: {
      type: Number,
      default: 0
    },
    // 四周的间隙
    gutter: {
      type: Number,
      default: 4
    },
    shadow: {
      type: Number,
      default: 4
    },
    margin: {
      type: Array,
      default: () => [24, 10]
    },
    rangKey: {
      type: String,
      default: 'text'
    },
    color: {
      type: String,
      default: 'black'
    },
    bgColor: {
      type: String,
      default: 'grey-lighten-4'
    },
    activeFontColor: {
      type: String,
      default: 'black'
    },
    activeColor: {
      type: String,
      default: 'white'
    },
    fontSize: {
      type: String,
      default: 'n'
    },
    round: {
      type: String | Number,
      default: 4
    },
    // 跟随主题色的改变而改变。
    fllowTheme: {
      type: Boolean | String,
      default: true
    },
    black: {
      type: Boolean | String,
      default: null
    }
  },
  data() {
    return {
      body_height: 0,
      active_barHeight: 0,
      active_barWidth: 0,
      aniOn: false,
      left: 0,
      preventLeft: 0,
      width_item_w: 0,
    };
  },
  watch: {
    value(newValue, oldValue) {
      this.active_index = newValue;
    },
    list: {
      deep: true,
      async handler() {
        this.width_item = this.width;
        await this.setInits();
      }
    }
  },
  computed: {
    width_item: {
      get: function() {
        return this.width_item_w;

      },
      set: function(val) {
        if (val == 0) {
          this.width_item_w = 'auto'
        } else {
          this.width_item_w = (uni.upx2px(val) / this.list.length)
        }

      }
    },
    black_tmeme: function() {
      if (this.black !== null) return this.black;
      return this.$tm.vx.state().tmVuetify.black;
    },
    color_tmeme: function() {
      if (this.$tm.vx.state().tmVuetify.color !== null && this.$tm.vx.state().tmVuetify.color && this
          .fllowTheme) {
        return this.$tm.vx.state().tmVuetify.color;
      }
      return this.activeFontColor;
    },
    listData: function() {
      return this.list;
    },
    active_index: {
      get: function() {
        return this.value;
      },
      set: function(val) {
        this.active = val;
        this.$emit('input', val);
        this.$emit('update:value', val);
        // this.$emit('change', val);
        this.$nextTick(function() {
          this.setDefaultPos();
        });
      }
    }
  },
  created() {
    this.active_index = this.value;
    this.width_item = this.width;
  },
  mounted() {
    let t = this;
    t.setInits();
  },
  updated() {
    this.setInits();
  },
  methods: {
    setInits() {
      let t = this;
      this.width_item = this.width;
      this.$nextTick(function() {
        uni.createSelectorQuery().in(t).select('.tm-segTabs-wkbody')
            .boundingClientRect().select('#tm-segTabs-item-' + this.active).boundingClientRect()
            .exec(function(tx) {

              let p = tx[0]
              if (!p) return;
              t.body_height = p.height;
              t.preventLeft = p.left;

              let p1 = tx[1]
              if (!p1) return;
              t.active_barHeight = p1.height;
              let left = 0;
              if (t.width == 0) {
                t.active_barWidth = p1.width;
                left = p1.left;
              } else {
                t.active_barWidth = t.width_item
                left = t.preventLeft + t.width_item * t.active;
              }

              let lsl = Math.floor((t.gutter / 2))
              t.left = left - t.preventLeft - uni.upx2px(lsl);

              t.aniOn = true;
            })


      });
    },
    returnKeyValue(item) {
      if (typeof item == 'string') {
        return item;
      }
      if (typeof item == 'object') {
        return item[this.rangKey];
      }
    },
    setDefaultPos() {
      let t = this;
      uni.createSelectorQuery().in(t).select('#tm-segTabs-item-' + this.active)
          .boundingClientRect().exec(
          function(p1) {
            if (!p1[0]) return;
            t.active_barHeight = p1[0].height;
            t.active_barWidth = p1[0].width;
            let lsl = Math.floor((t.gutter / 2))

            t.left = p1[0].left - t.preventLeft - uni.upx2px(lsl);
          })



    },
    clickItem(index, item) {
      this.active_index = index;
      this.$emit('change', index);
      this.$nextTick(function() {
        this.setDefaultPos();
      });
    }
  }
};
</script>

<style lang="scss">
.tm-segTabs {
  .tm-segTabs-wkbody {
    z-index: 2;

    .tm-segTabs-item {
      transition: all 0.2s linear;
    }
  }

  .tm-segTabs-bg {
    .tm-segTabs-bg-bar {

      &.aniOn {
        transition: all 0.2s ease-in-out;
      }
    }

    box-shadow: 0 0 3px 2px rgba(0, 0, 0, 0.02) inset;
  }
}
</style>
